<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>库存管理系统 - 注册</title>
    <!-- Element UI CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 自定义登录页面布局样式 -->
    <link rel="stylesheet" href="/static/css/login.css" />
  </head>
  <body>
    <!-- 顶部导航栏，白底，系统名称居左 -->
    <header class="login-header">
      <div class="login-header-content">
        <img
          src="https://cdn.jsdelivr.net/gh/element-plus/element-plus@2.3.7/docs/public/images/element-plus-logo.svg"
          alt="LOGO"
          class="login-logo"
        />
        <span class="login-title">库存管理系统</span>
      </div>
    </header>
    <!-- 中间背景和注册表单 -->
    <main class="login-main">
      <div class="login-main-left"></div>
      <div id="app" class="login-form-wrapper">
        <el-form
          :model="formData"
          ref="registerForm"
          label-width="80px"
          @submit.native.prevent="handleRegister"
        >
          <h2 class="login-form-title">用户注册</h2>
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="formData.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-select v-model="formData.role" placeholder="请选择角色" style="width: 100%;">
              <el-option label="操作员" value="operator"></el-option>
              <el-option label="管理员" value="admin"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="formData.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="formData.confirmPassword"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请确认密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          
          <div class="login-form-row login-form-actions">
            <el-button
              type="primary"
              :loading="loading"
              @click="handleRegister"
              style="width: 220px"
              >注册</el-button
            >
            <a href="/auth/login" class="login-link">已有账号？</a>
          </div>
        </el-form>
      </div>
    </main>
    <!-- 页脚 -->
    <footer class="login-footer">
      &copy; 2025 库存管理系统 | 技术支持：IT部门
    </footer>

    <!-- Element UI & Vue & Axios -->
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/element-ui.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/request.js"></script>
    <script src="/static/js/api/auth.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          const validateConfirmPassword = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.formData.password) {
              callback(new Error('两次输入密码不一致'));
            } else {
              callback();
            }
          };
          
          return {
            formData: {
              username: "",
              password: "",
              confirmPassword: "",
              role: "operator"
            },
            loading: false,
            rules: {
              username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 20, message: '用户名长度在3到20个字符', trigger: 'blur' }
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
              ],
              confirmPassword: [
                { required: true, message: '请确认密码', trigger: 'blur' },
                { validator: validateConfirmPassword, trigger: 'blur' }
              ],
              role: [
                { required: true, message: '请选择角色', trigger: 'change' }
              ]
            }
          };
        },
        methods: {
          async handleRegister() {
            this.$refs.registerForm.validate(async (valid) => {
              if (valid) {
                this.loading = true;
                
                try {
                  const registerData = {
                    username: this.formData.username,
                    password: this.formData.password,
                    confirm_password: this.formData.confirmPassword,
                    role: this.formData.role
                  };
                  
                  await authAPI.register(registerData);
                  this.$message.success("注册成功，请登录！");
                  setTimeout(() => {
                    window.location.href = "/auth/login";
                  }, 1500);
                } catch (error) {
                  this.$message.error(error.message || "注册失败");
                } finally {
                  this.loading = false;
                }
              }
            });
          }
        }
      });
    </script>
</body>
</html>
